<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { createMap, getSelectItem, PointType } from "../methods/index";
import Feature, { FeatureLike } from "ol/Feature";
import { Style } from "ol/style";
import { MapBrowserEvent } from "ol";
import markBlue from "../methods/assets/images/mark_blue.png";
const mapBox = ref();

onMounted(() => {
  const map = (window.map = createMap({
    target: mapBox.value,
  }));

  map.drawArea(
    [
      {
        adcode: "110000",
        isFullData: true,
      },
    ],
    {
      style: () => {
        return {
          color: "green",
          areaColor:'rgba(0,0,0,0.2)',
        };
      },
    }
  );
});
</script>

<template>
  <div ref="mapBox" style="width: 100%; height: 100%"></div>
</template>

<style scoped></style>
